<template>
  <el-container class="h-100 p-3" id="countylevel-FirstProof">
    <el-main class="p-0">
      <ConutryStatisticsMap
        ref="conutryStatisticsMap"
        showAll="图斑总数"
        showMol="已举证数"
        prosesser="工作进度"
        provinceRanking="全省排名"
        ranking="全市排名"
        @getMapData="getMapData"
        @selctedCityId="selctedCityId"
        :themeMapData="themeMapData"
        urlType="2"
        @selctedProcinceId="selctedProcinceId"
      />
    </el-main>
    <el-aside width="500px" class="ml-3 text-center d-flex flex-column">
      <el-select class="w-100" v-model="selectArea" placeholder="请选择" @change="cityChange">
        <el-option
          v-for="item in cityOptions"
          :key="item.cityId"
          :label="item.cityName"
          :value="item.cityId"
        ></el-option>
      </el-select>
      <el-main class="bg-white span mt-2 px-5">
        <div class="row mb-3">
          <div class="w-10">
            <span>地市</span>
          </div>
          <div class="col-sm ml-3">
            <span>举证进度</span>
          </div>
          <div style="width: 180px;" class="text-right">
            <span>已举证数量 / 图斑总数</span>
          </div>
        </div>
        <div class="row text-muted my-4" v-for="(item, index) in tableData" :key="index">
          <div class="w-10">
            <span class="font-weight-bold">{{item.name}}</span>
          </div>
          <div class="col-sm pt-1">
            <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="getPercentage(item.areaYjz, item.total)"
              status="success"
            ></el-progress>
          </div>
          <div style="width: 160px;" class="text-right">
            <span class="font-weight-bold">
              <span class="text-success">{{item.areaYjz}}</span>
              /{{item.total}}
            </span>
          </div>
        </div>
      </el-main>
      <div class="mt-2 bg-white pt-3" style="height:300px;">
        <CommonEcharts ref="commonEcharts" :renderColor="renderColor" titleCharts="县级初次举证统计"/>
      </div>
    </el-aside>
  </el-container>
</template>
<script>
import ConutryStatisticsMap from "./ConutryStatisticsMap";
import axios from "axios";
import CommonEcharts from "./CommonEcharts";
const baseColor = [
  [86, 205, 115, 0.7],
  [248, 186, 0, 0.7],
  [31, 156, 255, 0.7]
];
export default {
  name: "countylevelFirstProofStatistics",
  title: "县级初次举证统计",
  components: { ConutryStatisticsMap, CommonEcharts },
  data() {
    return {
      cityOptions: [],
      selectArea: null,
      tableData: null,
      provinceId: "610000",
      pieData: [],
      themeData: ["举证100%的区县", "举证80%-100%的区县", "举证80%以下的区县"],
      renderColor: ["#56CD73", "#F8BA00", "#1F9CFF"],
      themeMapData: []
    };
  },
  methods: {
    selctedProcinceId() {
      this.selectArea = parseInt(this.provinceId);
      this.getData();
    },
    selctedCityId(cityId) {
      this.themeMapData = this.getProgressColor();
      this.selectArea = parseInt(cityId);
      this.getData();
    },
    getMapData(data) {
      this.tableData = data;
      let all = 0,
        middle = 0,
        mix = 0;
      data.forEach((element, i) => {
        let renderValue = (element.areaYjz || 0) / (element.total || 1);
        if (renderValue >= 0.8 && renderValue < 1) {
          middle++;
        } else if (renderValue < 0.8) {
          mix++;
        } else {
          all++;
        }
      });
      let _this = this;
      _this.pieData = [];
      _this.pieData.push({
        name: "举证100%的区县",
        value: all
      });
      _this.pieData.push({
        name: "举证80%-100%的区县",
        value: middle
      });
      _this.pieData.push({
        name: "举证80%以下的区县",
        value: mix
      });
      _this.$refs.commonEcharts.setData(_this.pieData, _this.themeData);
    },
    cityChange() {
      this.getData();
    },
    getData() {
      let surl = this.$api.getSpotProgressStatistical;
      let cityId = "";
      let code = "";
      let _this = this;
      if (this.provinceId == this.selectArea) {
        cityId = "";
        code = this.provinceId;
      } else {
        cityId = this.selectArea;
        code = cityId;
      }
      this.$get(surl, {
        provinceId: _this.provinceId,
        cityId: cityId
      })
        .then(res => {
          if (res.data.code === "200") {
            this.tableData = res.data.data;
            var tData = [];
            let _this = this;
            this.tableData.forEach((element, i) => {
              let ii = {
                name: element.name,
                value: (element.areaYjz || 0) / (element.total || 1),
                total: element.total + "个",
                molecule: element.areaYjz + "个",
                prosesser:
                  parseInt(
                    ((element.areaYjz || 0) / (element.total || 1)) * 100
                  ) + "%",
                provinceRanking: i
              };
              tData.push(ii);
            });
            _this.$refs.conutryStatisticsMap.renderMap(
              tData,
              _this.getProgressColor(),
              code
            );
          }
        })
        .catch(error => {
          console.log(error);
        });
      let areaUrl = this.$api.getProgressQualityRanking;
      this.$get(areaUrl, {
        cityId: cityId,
        dataType: 1,
        sort: 1,
        level: 2
      })
        .then(res => {
          if (res.data.code === "200") {
            this.pieData = [];
            let all = 0,
              middle = 0,
              mix = 0;
            let _this = this;
            res.data.data.forEach((element, i) => {
              let renderValue = element.proofRate || 0;
              if (renderValue >= 80 && renderValue < 100) {
                middle++;
              } else if (renderValue < 80) {
                mix++;
              } else {
                all++;
              }
            });
            _this.pieData.push({
              name: "举证100%的区县",
              value: all
            });
            _this.pieData.push({
              name: "举证80%-100%的区县",
              value: middle
            });
            _this.pieData.push({
              name: "举证80%以下的区县",
              value: mix
            });
            _this.$refs.commonEcharts.setData(_this.pieData, _this.themeData);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getPercentage(sch, total) {
      let result = total ? parseInt((sch / total) * 100) : 0;
      return result || 0;
    },
    getProgressColor() {
      return [
        {
          color: baseColor[0],
          max: 99999999,
          min: 1,
          text: "100%"
        },
        {
          color: baseColor[1],
          max: 1,
          min: 0.8,
          text: "80%-100%"
        },
        {
          color: baseColor[2],
          max: 0.8,
          min: 0,
          text: "80%以下"
        }
      ];
    }
  },
  mounted() {
    this.$get(this.$api.getCityInfo).then(res => {
      if (res.data.code === "200") {
        var result = res.data.data;
        this.cityOptions = [];
        if (this.$store.getters.userType != 3) {
          this.cityOptions.push({
            cityId: result.provinceId,
            cityName: result.provinceName
          });
        }
        this.provinceId = result.provinceId;
        res.data.data.citys.forEach(item => {
          this.cityOptions.push({
            cityId: item.cityId,
            cityName: item.cityName
          });
        });
        this.selectArea = this.cityOptions[0].cityId;
        this.$nextTick(() => {
          this.$refs.conutryStatisticsMap.initRenderMap().then(status => {
            if (status) {
              this.getData();
            }
          });
        });
      }
    });
  }
};
</script>
<style lang='scss'>
#countylevel-achievements {
  .theme {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: white;
  }
}
</style>